<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://code.z01.com/favicon.ico">
<title>粘脚-基于Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link rel="stylesheet" href="../../dist/css/bootstrap.min.css" >
<style>/* Sticky footer styles----------------- */
html { position: relative; min-height: 100%; }
body { margin-bottom: 60px; /* Margin bottom by footer height */ }
.footer { position: absolute; bottom: 0; width: 100%; height: 60px; /* Set the fixed height of the footer here */ line-height: 60px; /* Vertically center the text there */ background-color: #f5f5f5; }
/* Custom page CSS------------ */
/* Not required for template or sticky footer method. */
.container { width: auto; max-width: 680px; padding: 0 15px;}
</style>
</head>
<body>
<main role="main" class="container">
  <div class="mt-1">
    <h1>粘脚</h1>
  </div>
  <p class="lead">使用此自定义HTML和CSS在桌面浏览器中将固定高度页脚固定到视口底部。</p>
  <p>如果需要， <a href="../examples/sticky-footer-navbar">也可以使用带有固定导航栏的粘性页脚</a> 。</p>
</main>
<footer class="footer">
  <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div>
</footer>
</body>
</html>